{include admin.inc.header}

{include admin.inc.top}

<div class="container-fluid content-body">
    <div class="main">
        {include admin.inc.menu}

        <section class="right-section" id="right-section">
            <!-- start of inner-frame -->
            <div class="inner-iframe">

                {include admin.inc.bread}
                <!-- Nav tabs -->
                <ul class="nav nav-tabs">
                    {loop $__sysmenus[$menu_key][subs] $k $v}
                    <li
                    {if $v[id]==$menu_id} class="active"{/if}><a
                        href="{if $v[id]==$menu_id}javascript:;{else}/{$v[url]}{/if}"><i
                        class="glyphicon glyphicon-th-list"></i> {$v[name]}</a></li>
                    {/loop}
                </ul>

                <div class="inner-container">

                    <!-- search form start -->
                    <form class="form-inline form-search" role="form" id="search-form" autocomplete="off">

                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">牌号</div>
                                <input type="text" name="brand_name" value="{$params[brand_name]}"
                                       class="form-control input-sm " placeholder="牌号" required>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-addon">
                                    时间
                                </div>
                                <input style="width:100px;" class="form-control form-control-inline input-sm mdate"
                                       size="16" type="text" name="addtime_s" value="{$params['addtime_s']}"
                                       placeholder="开始时间">

                                <div class="input-group-addon">
                                    -
                                </div>
                                <input style="width:100px;" class="form-control form-control-inline input-sm mdate"
                                       size="16" type="text" name="addtime_e" value="{$params['addtime_e']}"
                                       placeholder="结束时间">
                            </div>
                        </div>
                        <input type="hidden" name="day">

                        <button type="submit" class="btn btn-success btn-sm">
                            <i class="glyphicon glyphicon-search"></i> 搜索
                        </button>
                        <button type="button" class="btn btn-sm btn-success js-7-search"><i class="glyphicon"></i>最近7天
                        </button>
                        <button type="button" class="btn btn-sm btn-success js-15-search"><i class="glyphicon"></i>最近15天
                        </button>

                        <button type="button" class="btn btn-sm btn-success js-30-search"><i class="glyphicon"></i>最近30天
                        </button>

                    </form><!-- END search form -->


                    <div class="row">
                        <div class="col-sm-12">
                            <section class="panel">
                                <header class="panel-heading">
                                </header>
                                <div class="panel-body">
                                    <div id="visitors-chart">
                                        <div id="visitors-container"
                                             style="width: 100%;height:300px; text-align: center; margin:0 auto;">
                                        </div>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>


                </div>

            </div><!-- end of inner -->
        </section>

    </div>
</div>

{include admin.inc.footer}


</body>
</html>
{cres:js /js/framework/flot-chart/jquery.flot.js}
{cres:js /js/framework/flot-chart/jquery.flot.tooltip.js}
{cres:js /js/framework/flot-chart/jquery.flot.resize.js}
{cres:js /js/framework/flot-chart/jquery.flot.pie.resize.js}
{cres:js /js/framework/flot-chart/jquery.flot.selection.js}
{cres:js /js/framework/flot-chart/jquery.flot.stack.js}
{cres:js /js/framework/flot-chart/jquery.flot.time.js}

<script>
    Date.prototype.Format = function (fmt) { //author: meizz
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    };
</script>
<script>

    var x_arr = [{$trendChartData['x_arr']}];
    var y_arr = [{$trendChartData['y_arr']}];

    if (x_arr.length>=1) {

        showPlot(x_arr);
    }else{

        $("#visitors-container").html('请输入牌号，查看行情趋势！');
    }
    function gd(year, month, day) {
        return new Date(year, month-1, day).Format("MM-dd");
    }


    function showPlot(x_arr) {


        $.plot("#visitors-container", [y_arr], {
            xaxis: {
                ticks:x_arr
            },
            series: {
                lines: { show: true},
                points: {
                    show: true,
                    lineWidth: 2,
                    fill: true,
                    fillColor: "#ffffff",
                    symbol: "circle",
                    radius: 5
                }
            },
            grid: {
                hoverable: true,
                clickable: true,
                tickColor: "#f9f9f9",
                borderWidth: 1,
                borderColor: "#eeeeee"
            },
            colors: ["#2dc0e8", "#0022FF"],

        });

    }


    $("<div id='tooltip'></div>").css({
        position: "absolute",
        display: "none",
        border: "1px solid #fdd",
        padding: "2px",
        "background-color": "#fee",
        opacity: 0.80
    }).appendTo("body");

    $("#visitors-container").bind("plothover", function (event, pos, item) {

        if (item) {
            console.info(item);

            var x = item.datapoint[0].toFixed(2),
                    y = item.datapoint[1].toFixed(2);
            console.info();
            var x_date=item.series.xaxis.ticks[item.dataIndex].label;

            $("#tooltip").html('价格' + "于 " + x_date + " ， " + y+'元/吨')
                    .css({top: item.pageY+5, left: item.pageX+5})
                    .fadeIn(200);
        } else {
            $("#tooltip").hide();
        }

    });



</script>

<script>

    $(".js-7-search").click(function () {

        var preDate = getBeforeDate(7); //前7天
        $('input[name=addtime_s]').val(preDate);
        $('input[name=day]').val(7);

        mySubmit();

    });
    $(".js-15-search").click(function () {

        var preDate = getBeforeDate(15); //前30天
        $('input[name=addtime_s]').val(preDate);
        $('input[name=day]').val(15);

        mySubmit();

    });
    $(".js-30-search").click(function () {

        var preDate = getBeforeDate(30); //前30天
        $('input[name=addtime_s]').val(preDate);
        $('input[name=day]').val(30);

        mySubmit();

    });

    function mySubmit(){

        $('#search-form').submit();

    }
    //获取当前指定的前几天的日期
    function getBeforeDate(n) {
        var n = n;
        var d = new Date();
        var year = d.getFullYear();
        var mon = d.getMonth() + 1;
        var day = d.getDate();
        if (day <= n) {
            if (mon > 1) {
                mon = mon - 1;
            }
            else {
                year = year - 1;
                mon = 12;
            }
        }
        d.setDate(d.getDate() - n);
        year = d.getFullYear();
        mon = d.getMonth() + 1;
        day = d.getDate();
        s = year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
        return s;
    }

</script>
</body>
</html>
